<template>
	<view id="chooseCompanyPage">
		<view class="add">
			+ 新增公司信息
		</view>
		<view class="address-wrapper" v-if="list.length" key="has">
			<view class="sec" v-for="(item,index) in list" :key="item.id" @click="doCheck(item)">
				<image v-if="item.checked" key="checked" src="../../static/img/Btn_select_per.png" mode="aspectFill" class="sel-btn"></image>
				<image v-else key="check" src="../../static/img/Btn_select.png" mode="aspectFill" class="sel-btn"></image>
				<view class="con">
					<view class="title">
						<view class="name">
							{{item.companyName}}
						</view>
						<view class="tel">
							{{item.tel}}
						</view>
						
					</view>
					<view class="price">
						￥{{item.price}}
					</view>
					<view class="address">
						{{item.address}} 					                        
					</view>
				</view>
				
			</view>
		</view>
		<view class="address-wrapper list-null" v-else key="null">
			<image src="../../static/img/null.png" mode="aspectFill" class="null"></image>
			<view class="null-txt">
				暂无公司~
			</view>
		</view>
		<pay v-if="showPay" @close="payClose" name="发票的快递费用" :price="total"></pay>
		<operation-modal :visable="showOpe" url="../../static/img/success.png" txt="开票成功" @close="opeClose"></operation-modal>
		<view class="foooter-next" @click="doPay">
			确认开票
		</view>
	</view>
</template>

<script>
	import pay from "@/components/pay/pay.vue"
	import operationModal from "@/components/operation-modal/operation-modal.vue"
	import { companyList } from '../../utils/data.js'
	export default {
		components: {pay,operationModal},
		data() {
			return {
				list: companyList,
				showPay: false,
				total: 3000,
				showOpe: false
			}
		},
		methods: {
			add() {
				uni.navigateTo({
					url: '../companyEdit/companyEdit'
				})
			},
			doCheck(item) {
				this.total = item.price
				console.log(this.total)
				this.list.forEach(x => {
					x.checked = false
				})
				item.checked = true
			},
			doPay() {
				if (this.total < 10000) {
					
					uni.showModal({
						title: '提示',
						content: '未满1万元，需要支付快递费用',
						success: (res) => {
							this.showPay = true
						}
					})
					
			
				} else {
					this.showOpe = true
					
				}
				
			},
			payClose() {
				this.showPay = false
			},
			opeClose() {
				this.showOpe = false
				this.back()
			},
			back() {
				
				uni.navigateBack({
					delta: -1
				})
			}
		}
	}
</script>

<style>
/* #chooseCompanyPage {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
} */
.add {
	height: 78upx;
	line-height: 78upx;
	text-align: center;
	font-size:30upx;
	font-weight:500;
	color:rgba(17,24,33,1);
	background: #EA0A2A;
}
.sec {
	min-height: 260upx;
	display: flex;
	align-items: center;
	padding-left: 20upx;
}
.sel-btn {
	width: 37upx;
	height: 37upx;
}
.con {
	min-height: 129upx;
	border-bottom: 1upx solid #F5F2ED;
	padding: 59upx 0 39upx 29upx;
	flex: 9;
}
.title {
	font-size:32upx;
	font-weight:500;
	color:rgba(34,34,34,1);
}
.name, .tel {
	margin-right: 40upx;
	display: inline-block;
}
.price {
	margin-top: 20upx;
}
.address {
	margin: 19upx 0 0 0;
	width: 614upx;
	font-size:28upx;
	font-weight:400;
	color:rgba(153,153,153,1);
	line-height: 36upx;
}
.use-wrapper {
	height: 80upx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 30upx;
}
.sel {
	width: 30upx;
	height: 30upx;
}
.sel-area {
	font-size:24upx;
	font-family:PingFang SC;
	font-weight:500;
	color:rgba(138,133,124,1);
}
.sel-area.using {
	color:rgba(234,10,42,1);
}
.sel-txt {
	margin-left: 11upx;
}
.opa-area {
	display: flex;
	align-items: center;
	font-size:24upx;
	font-family:PingFang SC;
	font-weight:500;
	color:rgba(138,133,124,1);
}
.opa {
	margin-left: 40upx;
	display: flex;
	align-items: center;
}
.edit-ico {
	width: 28upx;
	height: 32upx;
}
.detail-ico {
	width: 28upx;
	height: 28upx;
}
.opa-txt {
	margin-left: 8upx;
}
.list-null {
	padding-top: 207upx;
}
</style>
